<template>
    <el-dialog class="ui-order-return-sales-dialog" v-model="dialogVisible" title="退货详情" @opened="init" @closed="finalThings">
        <div>
            <p>发起退单后，若本单为现金支付，请将相应的现金款项退还给顾客</p>
            <p>若本单为扫码支付，退单后将根据用户支付时选择的支付方式原路返还到顾客账户</p>
        </div>
        <el-table :data="goods" size="small" highlight-current-row :max-height="300" border>
            <el-table-column prop="name" label="商品图片" width="80" align="center" >
                <template #default="{row}">
                    <el-image style="width:35px; height: 35px" :src="imgUrl + row.img"/>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称" width="160" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sale_price" label="销售单价" width="80"></el-table-column>
            <el-table-column prop="num" label="销售数量" width="80"></el-table-column>
            <el-table-column prop="refund" label="已退数量" width="80"></el-table-column>
            <el-table-column label="退单数量">
                <template #default="{row}">
                    <el-input-number v-model="row.rnum" :disabled="row.allowRefund==0" size="small" :min="0" :max="row.allowRefund" style="width: 100px;" @change="sumAmount()" />
                </template>
            </el-table-column>
            <el-table-column label="退款金额" width="80">
                <template #default="{row}">
                    <el-text type="danger">{{ row.rnum ? row.rnum * (row.amount / row.num) : 0 }}</el-text>
                </template>
            </el-table-column>
        </el-table>
        <div class="ui-body-twocol return-sales-footer">
            <div>本单支付方式： <el-text :type="smD[order.settle_mode].theme">{{ smD[order.settle_mode].text }}</el-text></div>
            <div class="flex row">
                <div class="amount">总计退款: <el-text type="primary">￥<span v-rmb="sumRefund"></span></el-text></div>
                <el-button type="success" @click="submit">申请退款</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import { reactive, toRefs,computed } from 'vue'
import { smD, calcGoodsFlow } from '../../uiframe/utils';
import { useSocket, imgUrl } from '../../uiframe/services/socket';
import directives from '../../uiframe/services/directives';

export default {
    directives,
    props:{
        q:Object,
        done: Function,
        _compId: Number,
        payload:Object
    },
    setup(props)
    {
        let payload = JSON.parse(JSON.stringify(props.payload));
        
        let data = reactive({
            order: payload.order,
            goods:calcGoodsFlow(payload.goods),
            dialogVisible: true,
            sumRefund: 0
        }),
        onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) }
        const methods = {
            onCancel : ()=>{
                data.dialogVisible = false;
            },
            finalThings: () =>props.done(),
            init:()=>{
            },
            onSure:()=>{
                
            },
            sumAmount:()=>{ 
                let amount = 0;
                data.goods.forEach(g=>{
                    let price = g.amount / g.num;
                    if(g.rnum){
                        amount += g.rnum * price;
                    }
                })
                data.sumRefund = amount;
            },
            submit:()=>{
                let p = {
                    order_id: data.order.id,
                    goods: data.goods.filter(v=>v.rnum > 0).map(g=>({store_id:g.store_id, goods_id: g.goods_id, num:g.rnum}))
                }
                useSocket().then(socket=>{
                    var refund = () => {
                        socket.rpc('refund', p, 18000).then(res=>{
                            onmessage(res)
                            if(res.success){
                                data.dialogVisible = false
                                props.q.resolve({success:true});
                            }
                        }).catch(res=>{
                            onmessage(res)
                        })
                    }
                    if(data.order.settle_mode == 3){
                        ElMessageBox.confirm(`请退还给顾客现金: ${data.sumRefund} 元.`).then(()=>{
                            refund();
                        }).catch(()=>{}) 
                    }else{
                        refund();
                    }
                })
            }
        }

        return {
            ...toRefs(data),
            ...methods,
            smD,imgUrl
        }
    }
}
</script>

<style lang="scss">
.ui-order-return-sales-dialog{
    width: 45rem;
    max-width: 45rem;
    min-width: 45rem;
    margin-top: 5rem;
    .el-dialog__body{
        padding: .5rem;
        .return-sales-footer{
            align-items: center;
            padding: 15px 0;
            .row{
                display: flex;
                justify-content: right;
                align-items: center;
                .amount{
                    margin-right: 20px;
                }
            }
        }
    }
}
</style>